function createTabs(tabs, id) {
    var boxes = [];
    var tabs_box = document.createElement('div');

    function createLabelOnclick(i) {
        return function() {
            for (var k = 0; k < boxes.length; k++) {
                if (k == i) {
                    boxes[k].style.display = 'block';
                    if (tabs[k].onswitch) {
                        tabs[k].onswitch();
                    }
                } else {
                    boxes[k].style.display = 'none';
                }
            }
            if (localStorage) {
                localStorage[id + '_tabnum'] = i;
            }
        };
    }

    for (var i = 0; i < tabs.length; i++) {
        var box = document.createElement('div');
        box.className = 'tabs';
        if (i > 0) {
            box.style.display = 'none';
        }

        var header = document.createElement('div');
        header.className = 'tab_header';

        for (var j = 0; j < tabs.length; j++) {
            var label = document.createElement('span');
            label.innerHTML = tabs[j].title;
            label.className = (i == j) ? 'tab_label active_tab_label' : 'tab_label inactive_tab_label';
            label.onclick = createLabelOnclick(j);
            header.appendChild(label);
        }

        var body = document.createElement('div');
        body.className = 'tab_body';
        body.appendChild(tabs[i].content);

        box.appendChild(header);
        box.appendChild(body);

        tabs_box.appendChild(box);
        boxes.push(box)
    };

    try {
        var activeTabNum = parseInt(localStorage[id + '_tabnum']);
        //console.log('activeTabNum');
        //console.log(activeTabNum);
        if (activeTabNum != NaN) {
            boxes[activeTabNum].getElementsByClassName('tab_label')[activeTabNum].onclick();
        }
    } catch(e) {
        //console.log(e);
    }

    return tabs_box;
}
